<template>
  <div class="cart_wrap">
    <h1><span>首页</span> &gt; <span>购物车</span></h1>
    <table>
      <thead>
        <tr>
          <th>
            <input @click="selAll" v-model="checkAll" type="checkbox" />全选
          </th>
          <th>商品信息</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cartList" :key="item.id">
          <td>
            <input
              @click="changeSel(item.skuId, item.selected)"
              type="checkbox"
              :checked="item.selected"
            />
          </td>
          <td>
            <div class="pname">
              <img v-lazy="item.picture" alt="" />
              <div>
                <p>{{ item.name }}</p>
                <div>{{ item.attrsText }}</div>
              </div>
            </div>
          </td>
          <td>￥ {{ item.price }}</td>
          <td class="num">
            <button @click="changeNum(item, 'min')">-</button>
            <input type="text" :value="item.count" />
            <button @click="changeNum(item, 'plus')">+</button>
          </td>
          <td style="color:red;">
            ￥{{ (item.count * item.price).toFixed(2) }}
          </td>
          <td>
            <div>移入收藏</div>
            <a href="#" @click="del(item.skuId)">删除</a>
            <p>找相似</p>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="cart_bottom">
      <div>
        <input @click="selAll" v-model="checkAll" type="checkbox" />全选
        <a href="javascript:void(0)" @click="delSelPro">删除选中商品</a>
        <a href="#">移入收藏夹</a>
        <a href="#">清空失效商品</a>
      </div>
      <div class="count">
        <span>共{{ allData.count }}件商品</span>
        <span>已选择{{ allData.selected }}件商品</span>
        <span
          >商品合计：<span class="price">
            ￥{{ allData.selectedPrice }}</span
          ></span
        >
        <div class="order" @click="toOrder">
          下单结算
        </div>
      </div>
    </div>
    0
    <same-goods :title="'猜你喜欢'"></same-goods>
  </div>
</template>
<script>
import { _getCartList, _delCart, _selCart, _selAll } from '../../api/cart'
// 详情页中的子组件
import sameGoods from '../Detail/child/sameGoods.vue'

export default {
  components: { sameGoods },
  data () {
    return {
      checkAll: false,
      cartList: [] //购物车列表数据
    }
  },
  created () {
    this.getCart()
  },
  computed: {
    // 计算 总数  选中数量 和 选中总价
    allData () {
      var selected = 0
      var selectedPrice = 0
      this.cartList.forEach(item => {
        if (item.selected) {
          selected++
          selectedPrice += Number((item.price * item.count).toFixed(2))
        }
      })
      return {
        count: this.cartList.length, //总数
        selected: selected, //选中的总数
        selectedPrice: selectedPrice //选中的总价
      }
    }
  },
  methods: {
    // 下单结算
    toOrder () {
      //  跳转到订单页面
      this.$router.push({
        name: 'order'
      })
    },
    // 删除选中商品
    async delSelPro () {
      var ids = []
      // 整理好要删除的商品的id数组
      this.cartList.forEach(item => {
        if (item.selected) {
          ids.push(item.skuId)
        }
      })
      var res = await _delCart({
        ids: ids,
        clearAll: false, //清空所有商品
        clearInvalid: false //清除无效商品
      })
      console.log(res)
      this.getCart()
    },
    // 全选接口
    async selAll () {
      console.log(this.checkAll)
      var res = await _selAll({
        selected: this.checkAll
      })
      console.log(res)
      this.getCart()
    },
    // 修改数量接口
    async changeNum (item, status) {
      if (status == 'plus') {
        ++item.count
      } else if (status == 'min') {
        --item.count
        if (count <= 1) {
          item.count = 1
        }
      }
      var res = await _selCart(item.skuId, {
        count: item.count
      })
      console.log(res)
    },
    // 单选
    async changeSel (id, selected) {
      console.log(selected)
      // 单选接口
      var res = await _selCart(id, {
        selected: !selected
      })
      console.log(res)
      this.getCart()
    },
    // 单个删除
    async del (id) {
      // 删除接口  [id]
      if (confirm('你确定删除商品吗')) {
        var res = await _delCart({
          ids: [id],
          clearAll: false,
          clearInvalid: false
        })
        this.getCart()
        console.log(res)
      }
    },
    // 获取购物车列表接口
    async getCart () {
      var res = await _getCartList()
      console.log(res)
      this.cartList = res.data.result
      // 判断是否全选
      var flag = true //假设购物车中都是被选中状态
      this.cartList.forEach(item => {
        // 假如发现数据中有一个为假
        if (!item.selected) {
          flag = false
        }
      })
      if (flag) {
        this.checkAll = true
      } else {
        this.checkAll = false
      }
    }
  }
}
</script>
<style lang="less">
.cart_wrap {
  width: 1240px;
  margin: 10px auto;
}
table {
  width: 1240px;

  thead {
    height: 71px;
    border-bottom: 1px solid #e5e5e5;
    th {
      font-weight: bold;
      font-size: 20px;
    }
  }

  td {
    text-align: center;
    .pname {
      display: flex;
    }
    img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
  }
  .num {
    button {
      width: 40px;
      height: 40px;
    }
    input {
      height: 36px;
      width: 70px;
      text-align: center;
    }
  }
}
tr {
  height: 130px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e5e5;
}
.cart_bottom {
  width: 1240px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
  margin: 20px auto;
  background: #e5e5e5;
  a {
    margin-left: 20px;
  }
  .count {
    display: flex;
    height: 80px;
    align-items: center;
    .order {
      width: 180px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      background: #27bb9a;
      color: white;
      cursor: pointer;
    }
    span {
      margin-left: 5px;
    }
    .price {
      color: red;
      font-size: 20px;
    }
  }
}
</style>
